<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="zh-cn"><head>
<base href="<%=basePath%>">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta http-equiv="Content-Language" content="zh-cn">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="mobile-agent" content="">
    <meta name="applicable-device" content="pc">
    <title>苏格拉没有底 - QQ音乐-千万正版音乐海量无损曲库新歌热歌天天畅听的高品质音乐平台！</title>
	<link rel="stylesheet" href="static/specialList/css/layout_0412.css">
	<link rel="stylesheet" href="static/specialList/css/album_detail_0803.css">
	<link rel="stylesheet" href="static/specialList/css/popup_login.css">
	<link rel="stylesheet" href="static/specialList/css/qb-ie-remind.css">
</head>
<body class="os_mac">
    <!-- 头部 N -->
		<jsp:include page="musicTop.jsp"></jsp:include>
   	<!-- 头部 S -->
	<div class="main">
        <div class="mod_data">
            <span class="data__cover">
                <img id="albumImg" src="${speciaLlist.specialPhoto }" class="data__photo">
                <i class="data__cover_mask"></i>
            </span>
            <div class="data__cont">
                <div class="data__name">
                    <h1 class="data__name_txt">${speciaLlist.specialName}</h1>
                </div>
				
                <div class="data__singer">
                    <i class="icon_singer sprite"></i>
                    <a href="singer/list2?musicId=${speciaLlist.musicId }&singerId=${speciaLlist.singerId}" class="js_singer data__singer_txt">${speciaLlist.singerName}</a>
                </div>
				
                <ul class="data__info">       
                  <li class="data_info__item">流派：${speciaLlist.specialType}</li>
                  <li class="data_info__item data_info__item--even">语种：${speciaLlist.language}</li>
                  <li class="data_info__item">发行时间：${speciaLlist.issueDate}</li>
                  <li class="data_info__item data_info__item--even">唱片公司：<a>${speciaLlist.recordCompany}</a></li>
                  <li class="data_info__item">类型：录音室专辑</li>
                </ul>
		        
                <div class="data__actions" >
                    <a class="mod_btn_green js_all_play"><i class="mod_btn_green__icon_play"></i>播放全部</a>
	                <a class="mod_btn js_fav_album"><i class="mod_btn__icon_like"></i>收藏</a>
			        <a class="mod_btn js_into_comment"><i class="mod_btn__icon_comment"></i>评论(597)</a>
	                <a class="mod_btn js_more"><i class="mod_btn__icon_menu"></i>更多</a>
                </div>
            </div>
        </div>        
	    <div class="detail_layout">
            <div class="detail_layout__main">
                    <div class="mod_songlist">
                        <ul class="songlist__header">
                            <li class="songlist__edit songlist__edit--check sprite">
                                <input type="checkbox" class="songlist__checkbox js_check_all">
                            </li>
                            <li class="songlist__header_name">歌曲</li>
                            <li class="songlist__header_author">歌手</li>
                            <li class="songlist__header_time">时长</li>
                        </ul>
                        <ul class="songlist__list" id="song_box"> 
                        	<c:forEach items="${specilaSp }" var="spe">
                                <li>
                                    <div class="songlist__item">
                                    <div class="songlist__number">${spe.specialId }</div>
	                                    <div class="songlist__songname">
		                                    <span class="songlist__songname_txt"><a>${spe.musicName}</a></span>
		                                    <div class="mod_list_menu">
		                                        <a href="#" class="list_menu__item list_menu__play js_play" >
		                                            <i class="list_menu__icon_play">
		                                            <video id="my-video" class="video-js" controls preload="auto" 
											         width="100" 
													 height="100"
													 poster="${spe.musicPhoto }" >
										        	<source src="${spe.musicMp3 }" type="video/mp4">
													</video>
													</i>
		                                            <span class="icon_txt">播放</span>
		                                        </a>
		                                        <a class="list_menu__item list_menu__add js_fav" >
		                                            <i class="list_menu__icon_add"></i>
		                                            <span class="icon_txt">添加到歌单</span>
		                                        </a>                                     
		                                        <a class="list_menu__item list_menu__down js_down" >
		                                            <i class="list_menu__icon_down"></i>
		                                            <span class="icon_txt">下载</span>
		                                        </a>
		                                        <a class="list_menu__item list_menu__share js_share" >
		                                            <i class="list_menu__icon_share"></i>
		                                            <span class="icon_txt">分享</span>
		                                        </a>
		                                    </div>
	                                 	</div>
                                    <div class="songlist__artist">
                                        <a href="singer/list2?musicId=${spe.musicId }&singerId=${spe.singerId}"  class="singer_name">${spe.singerName}</a>
                                    </div>
                                    <div class="songlist__time">${spe.timeLength}</div>
                                    <div class="songlist__other">
                                    </div>
                                    </div>
                                </li>
                                </c:forEach> 
                           </ul> 
                    </div>
            </div>
            
			
			<div class="detail_layout__other">
                <div class="mod_about" id="album_desc">
		            <h3 class="about__tit">简介</h3>
                        <p>${speciaLlist.specialIntro }</p>
                </div>
	        </div>
        </div>
        <!-- 专辑简介 -->
	</div>
    <!-- 跟头图保持一致 -->
    <div class="bg_detail">
		<i class="bg_detail__pic" style="background-image:url(static/specialList/images/moMU_1.jpg?max_age=2592000);"></i>
	</div>
		
		<!-- 尾部 N -->
			<jsp:include page="musicFoot.jsp"></jsp:include>
		<!-- 尾部 S -->
</body>
</html>